<template>
  <div class="flex-x-between-center bg-[#F3F4F6] fixed top-0 left-0 w-full z-10 h-[30px] select-none"
    @dblclick="handleDoubleClick">
    <!-- 左侧标题区域，添加-webkit-app-region使其可拖动 -->
    <div><img class="h-[18px] ml-[5px]" src="/favicon.ico" alt=""></div>
    <div class="flex items-center flex-1 h-full px-2 titlebar text-[14px]">
      {{ windowTitle.title }}
    </div>

    <!-- 右侧按钮区域 -->
    <div class="flex h-full">
      <!-- 最小化按钮 -->
      <div class="window-btn hover:bg-[#e5e5e5]" @click="handle('minimize')">
        <svg class="w-2.5 h-2.5" viewBox="0 0 12 12">
          <rect x="1" y="5" width="10" height="1" fill="currentColor" />
        </svg>
      </div>

      <!-- 最大化/还原按钮 -->
      <div class="window-btn hover:bg-[#e5e5e5]" @click="toggleMaximize">
        <svg v-if="!isMaximize" class="w-2.5 h-2.5" viewBox="0 0 12 12">
          <rect x="1" y="1" width="10" height="10" fill="none" stroke="currentColor" />
        </svg>
        <svg v-else class="w-2.5 h-2.5" viewBox="0 0 12 12">
          <path d="M3,1 h7 v7 h-7 v-7 M9,4 v7 h-7 v-7 h7" fill="none" stroke="currentColor" />
        </svg>
      </div>

      <!-- 关闭按钮 -->
      <div class="window-btn hover:bg-[#e81123] hover:text-white" @click="handle('closeBtn')">
        <svg class="w-2.5 h-2.5" viewBox="0 0 12 12">
          <path d="M2,2 L10,10 M2,10 L10,2" stroke="currentColor" stroke-width="1.1" fill="none" />
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useWindowTitle } from "@/stores/windowTitle";

const windowTitle = useWindowTitle();
const isMaximize = ref(false);

function handle(type: string) {
  window.ipcRenderer.invoke("windowTitle", type);
}

function toggleMaximize() {
  handle(isMaximize.value ? "restore" : "maximize");
  isMaximize.value = !isMaximize.value;
}

function handleDoubleClick() {
  toggleMaximize();
}
</script>

<style scoped>
.window-btn {
  @apply w-[46px] h-full flex items-center justify-center transition-colors cursor-pointer;
}

/* 禁用标题栏中按钮区域的拖动功能 */
.window-btn {
  -webkit-app-region: no-drag;
}

.titlebar {
  -webkit-app-region: drag;
  -webkit-user-select: none;
}

img {
  -webkit-app-region: drag;


}
</style>
